<!-- 档案模板 -->
<template>
  <el-form :model="archiveRuleForm" :rules="archiveRules" ref="archiveRuleForm" label-width="130px" size="mini"
    class="demo-ruleForm">
    <el-row :gutter="20">
      <el-col :span="14">
        <el-form-item label="模版样式" prop="templateName" class="labelWidth">
          <el-radio-group v-model="archiveRuleForm.templateStyle">
            <el-radio :label="0">横版</el-radio>
            <el-radio :label="1">竖版</el-radio>
            <el-radio :label="2">方正版</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="fields" class="fieldsTable">
          <el-table :data="archiveRuleForm.fields" border style="width: 100%" height="55vh">
            <el-table-column prop="fieldId" label="打印字段" width="">
              <template #default="scope">
                <el-select :ref="'archive' + scope.row.templateFieldId" v-model="scope.row.fieldId" placeholder="请选择"
                  @change="(e) => selectArchiveChange(e, scope.row)" clearable>
                  <el-option v-for="item in archiveFieldOptions" :key="item.defineId" :label="item.fieldTitle"
                    :value="item.fieldId" :disabled="archiveHasList.includes(item.fieldId)">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="fieldTitle" label="字段标题" width="">
              <template #default="scope">
                <el-input v-model="scope.row.fieldTitle" placeholder="请输入字段标题" clearable></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="fieldName" label="字段名称" width=""> </el-table-column>
            <!-- <el-table-column prop="fontFamily" label="字体" width="">
                      <template  #default="scope">
                        <el-select v-model="scope.row.fontFamily" placeholder="请选择" clearable>
                          <el-option
                            v-for="item in fontFamilyOptions"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column prop="fontSize" label="字体大小" width="">
                      <template  #default="scope">
                        <el-input
                          v-model="scope.row.fontSize"
                          type="number"
                          placeholder="请输入字体大小"
                          clearable
                        >
                        </el-input>
                      </template>
                    </el-table-column> -->
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button type="danger" icon="el-icon-delete" circle size="mini"
                  @click="deleteArchive(row)"></el-button>
                <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addArchive()"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="模版示例：" class="example">
          <div>
            <download-file buttonText="下载打印模版" :templateId="archiveRuleForm.templateStyle"></download-file>
            <upload-file buttonText="上传打印模版" :templateId="archiveRuleForm.templateStyle"></upload-file>
          </div>
          <span class="beCareful_text">*模版示例仅供参考，具体请以实际为准</span>
          <el-skeleton style="border: 1px solid #ccc; border-radius: 5px" :class="[
            archiveRuleForm.templateStyle == 1 ? 'rotate90deg' : '',
            archiveRuleForm.templateStyle == 2 ? 'square' : '',
          ]">
            <template slot="template">
              <div style="padding: 17px; display: flex; justify-content: center; align-items: center">
                <el-skeleton-item variant="p" style="width: 50%" />
              </div>
            </template>
          </el-skeleton>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="archiveSubmitForm">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { queryArchiveTemp, queryRFIDFieldArchive, edit } from '@/api/sys/template'
import DownloadFile from '@/components/downloadFile.vue'
import UploadFile from '@/components/uploadFile.vue'
export default {
  name: 'archiveTemplate',
  components: { DownloadFile, UploadFile },
  data() {
    return {
      archiveRuleForm: {},
      archiveRules: {
        templateStyle: [{ required: true, message: '请选择模版样式', trigger: 'blur' }],
        templateName: [{ required: true, message: '请输入模版名称', trigger: 'blur' }],
        labelWidth: [{ required: true, message: '请输入标签宽度', trigger: 'blur' }],
        labelLength: [{ required: true, message: '请输入标签长度', trigger: 'blur' }],
      },
      archiveFieldOptions: [],
      archiveHasList: [],
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    queryRFIDFieldArchive() {
      queryRFIDFieldArchive()
        .then((res) => {
          if (res.data.code == 200) {
            this.archiveFieldOptions = res.data.data
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    queryArchiveTemp() {
      queryArchiveTemp()
        .then((res) => {
          if (res.data.code == 200) {
            this.archiveRuleForm = res.data.data
            if (this.archiveRuleForm.fields.length > 0) {
              this.archiveRuleForm.fields.forEach((row) => {
                if (this.archiveFieldOptions.some((item) => item.fieldId === row.fieldId)) {
                  this.archiveHasList.push(row.fieldId)
                }
              })
            }
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    selectArchiveChange(e, row) {
      if (this.$refs['archive' + row.templateFieldId].value === undefined) {
        this.archiveHasList.push(e)
      } else {
        this.archiveHasList = this.archiveHasList.filter(
          (item) => item !== this.$refs['archive' + row.templateFieldId].value
        )
        this.archiveHasList.push(e)
      }
      if (e === '') {
        // this.boxRuleForm.fields中和row相同的一条数据的fieldTitle为空
        this.archiveRuleForm.fields.forEach((item) => {
          if (item.templateFieldId === row.templateFieldId) {
            item.fieldTitle = ''
          }
        })
      } else {
        this.archiveRuleForm.fields.forEach((item) => {
          if (item.templateFieldId === row.templateFieldId) {
            item.fieldTitle = this.archiveFieldOptions.filter(
              (item) => item.fieldId === e
            )[0].fieldTitle
            item.fieldName = this.archiveFieldOptions.filter(
              (item) => item.fieldId === e
            )[0].fieldName
          }
        })
      }
    },
    deleteArchive(row) {
      this.archiveRuleForm.fields = this.archiveRuleForm.fields.filter(
        (item) => item.fieldId !== row.fieldId
      )
      this.archiveHasList = this.archiveHasList.filter((item) => item !== row.fieldId)
    },
    addArchive() {
      // this.boxRuleForm.fields添加一条空数据
      this.archiveRuleForm.fields.push({
        templateFieldId:
          new Date().getTime().toString() + Math.floor(Math.random() * 100).toString(),
        templateId: this.archiveRuleForm.templateId,
        fieldId: '',
        fieldTitle: '',
        fieldName: '',
        fontFamily: '',
        fontSize: null,
      })
    },
    archiveSubmitForm() {
      this.$refs['archiveRuleForm'].validate((valid) => {
        if (valid) {
          // 表格中的打印字段不能存在空值
          if (this.archiveRuleForm.fields.some((item) => item.fieldId === '')) {
            this.$message.warning('请选择打印字段')
            return
          }
          edit(this.archiveRuleForm)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.message)
              }
            })
            .catch((err) => {
              this.$message.error(err)
            })
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.el-tabs--border-card>.el-tabs__content {
  padding: 7px;
}

.el-card__body {
  height: 8.5rem
    /* 500/192 */
  ;
}

.labelWidth {
  width: 100%;
}

.tableWidth {
  width: 80%;
}

.example {
  display: flex;
  flex-direction: column;

  .el-form-item__content {
    margin: 10px 0 0 10px !important;
  }
}

.fieldsTable {
  .el-form-item__content {
    margin: 0 0 0 10px !important;
  }
}

.el-skeleton__item {
  display: block;
  height: 20px;
}

.rotate90deg {
  transform: rotate(90deg);
  transform-origin: 50px 50px;
  width: 70%;
}

.square {
  height: 300px;
}
</style>
